<template>
  <div class="div">
    <!-- 面包屑 -->
    <div class="top-div">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">客户</el-breadcrumb-item>
        <el-breadcrumb-item><a href="#">客户类型</a></el-breadcrumb-item>
      </el-breadcrumb>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="addTableData"
        v-permissions="{
          role: ['GroupManagement', 'PurchaserManagement', 'Admin'],
        }"
      >
        新增
      </el-button>
    </div>
    <!-- table组件 -->
    <div class="table-div">
      <template class="table-div-template">
        <el-table
          :data="tableData"
          style="width: 100%"
          :border="false"
          @cell-mouse-enter="enter"
          @cell-mouse-leave="leave"
        >
          <el-table-column prop="name" label="客户类型"></el-table-column>
          <el-table-column prop="groupName" label="所属集团"></el-table-column>
          <el-table-column
            prop="priceFloatRatio"
            label="价格浮动比例"
          ></el-table-column>
          <!-- <el-table-column prop="createTime" label="运营时段" width="361.5px">
          </el-table-column> -->
          <el-table-column label="操作" width="220px" fixed="right">
            <template slot-scope="scope">
              <div :class="scope.$index == 0 ? 'operation' : ''">
                <el-button
                  @click="editInfo(scope.$index, scope.row)"
                  type="text"
                  size="small"
                  v-permissions="{
                    role: ['GroupManagement', 'PurchaserManagement', 'Admin'],
                  }"
                >
                  编辑
                </el-button>
                <!--              <el-button
                type="text"
                size="small"
              >
                导出报价单
              </el-button>
               <el-button
                 @click="hideGoods()"
                type="text"
                size="small"
              >
                屏蔽商品
              </el-button>-->
                <el-button
                  @click="delInfo(scope.$index, scope.row)"
                  type="text"
                  size="small"
                  v-permissions="{
                    role: ['GroupManagement', 'PurchaserManagement', 'Admin'],
                  }"
                >
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!-- 分页 -->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="count"
        background
        layout="total, prev, pager, next, sizes , jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- dialog新增弹出框。 -->
    <el-dialog title="新增" :visible.sync="AddDialogFormVisible" width="500px">
      <el-form ref="ruleForm" :model="addform" label-width="95px">
        <el-form-item
          label="客户类型"
          prop="name"
          :rules="[
            {
              required: true,
              message: '客户类型为必填项',
              trigger: 'change',
            },
          ]"
        >
          <el-input
            placeholder="请输入客户类型"
            v-model="addform.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="groupId"
          label="所属集团"
          :rules="[
            {
              required: true,
              message: '所属集团为必填项',
              trigger: 'change',
            },
          ]"
        >
          <el-select
            v-model="addform.groupId"
            placeholder="选择所属集团"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格浮动比例" label-width="95px">
          <el-input-number
            @change="checkChange"
            v-model="addform.priceFloatRatio"
            :precision="2"
            :step="0.1"
            :min="0"
            :max="1"
          ></el-input-number>
        </el-form-item>
        <!-- <el-form-item label="商城下单时添加标签" label-width="150px">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="AddClose">取 消</el-button>
        <el-button type="primary" @click="saveInfo('ruleForm')">
          确 定
        </el-button>
      </div>
    </el-dialog>
    <!-- dialog编辑弹出框。 -->
    <el-dialog
      title="编辑"
      :visible.sync="EditDialogFormVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form ref="editRuleForm" :model="editform" label-width="95px">
        <el-form-item
          label="客户类型"
          prop="name"
          label-width="95px"
          :rules="[
            {
              required: true,
              message: '客户类型为必填项',
              trigger: 'change',
            },
          ]"
        >
          <el-input v-model.trim="editform.name" ref="el-input01"></el-input>
        </el-form-item>
        <el-form-item
          prop="groupId"
          label="所属集团"
          :rules="[
            {
              required: true,
              message: '所属集团为必填项',
              trigger: 'change',
            },
          ]"
        >
          <el-select
            v-model="editform.groupId"
            placeholder="选择所属集团"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格浮动比例" label-width="95px">
          <el-input-number
            @change="checkChange"
            v-model="editform.priceFloatRatio"
            :precision="2"
            :step="0.1"
            :min="0"
            :max="1"
          ></el-input-number>
        </el-form-item>
        <!-- <el-form-item label="商城下单时添加标签" label-width="150px">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="EditClose">取 消</el-button>
        <el-button type="primary" @click="EditSave('editRuleForm')">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllGroup } from '@/api/customer/customerProfile'
import {
  TypePagingQuery,
  customerAdd,
  customerDel,
  customerEdit,
} from '@/api/customer/customerType'
import { getDictValue } from '@/api/dictManagement'
export default {
  data() {
    return {
      floatData: '',
      AddDialogFormVisible: false,
      EditDialogFormVisible: false,
      isshow: -1,
      options: [],
      addform: {
        name: '',
        priceFloatRatio: undefined,
        remarks: '',
        wsId: 1,
        groupId: '',
      },
      editform: {},
      value: true, //开关。
      //分页组件属性定义：
      tableData: [], //客户类型-分页查询。
      count: 20,
      currentPage1: 1,
      total: 0,
    }
  },
  watch: {
    editform: {
      handler: function (val, w) {},
      deep: true,
    },
    'editform.priceFloatRatio'(e, w) {
      if (e != w) {
        console.log(e, w, '22222222222')
      }
    },
  },
  // watch:{
  //   watchData(newValue, oldValue){
  //     console.log(newValue,'newValue');
  //   }
  // },
  // computed:{
  //   watchData(){ return this.editform.priceFloatRatio }
  // },
  components: {},
  //钩子函数。
  async mounted() {
    await this.getList()
    await this.fetchData()
    this.getGroup()
  },
  methods: {
    async getGroup() {
      const res01 = await getAllGroup()
      this.options = res01.data
    },
    async getList() {
      const res = await TypePagingQuery(1, 100)
      // console.log('res', res)
      this.tableData = res.data.list
    },
    //新增-确认按钮(表单提交验证)。
    async saveInfo(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const res = await customerAdd(this.addform) //res命名。
          if (res.status == 200) {
            this.$message({
              type: 'success',
              message: '新增成功',
            })
            this.AddDialogFormVisible = false
            this.$refs['ruleForm'].resetFields() //清除input内容。
            this.getList()
          } else {
            console.log('error submit!!')
            return false
          }
        }
      })
    },
    //删除客户类型。
    delInfo(index, data) {
      console.log('data', data.id)
      console.log('index', index)
      this.$confirm(
        '此操作将永久删除[' + data.name + ']客户类型, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        //确认按钮执行
        .then(() => {
          this.del(data.id)
        })
        //取消按钮执行
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    //callback。
    async del(e) {
      let res = await customerDel(e)
      if (res.status == 200) {
        this.$message.success('删除成功!')
        this.getList()
      } else {
        this.$message(res.message)
      }
    },
    //分页点击事件。
    handleSizeChange(val) {
      this.count = val
      this.fetchData()
    },
    //分页点击事件。
    handleCurrentChange(val) {
      this.currentPage1 = val
      this.fetchData()
    },

    enter(row, column, cell) {
      this.isshow = row.id
    },
    leave(row, column, cell) {
      this.isshow = -1
    },
    //新增:
    addTableData() {
      this.AddDialogFormVisible = true
    },
    //新增取消。
    AddClose() {
      this.AddDialogFormVisible = false
      this.$refs['ruleForm'].resetFields() //清除input内容。
    },
    //编辑:
    async editInfo(index, row) {
      this.EditDialogFormVisible = true
      console.log('row', typeof row)
      console.log('index', index)
      this.editform = JSON.parse(JSON.stringify(row))
    },
    //编辑取消。
    EditClose() {
      this.EditDialogFormVisible = false
    },
    //编辑-确定
    async EditSave(formNames) {
      if (this.editform.priceFloatRatio > parseFloat(this.floatData)) {
        return false
      }
      this.$refs[formNames].validate(async (valid) => {
        if (valid) {
          const res01 = await customerEdit(this.editform)
          if (res01.status == 200) {
            this.$message({
              type: 'success',
              message: '编辑成功',
            })

            this.EditDialogFormVisible = false
            this.getList()
          } else {
            console.log('error submit!!')
            return false
          }
        }
      })
    },
    //分页查询
    fetchData() {
      TypePagingQuery(this.currentPage1, this.count).then((res) => {
        // console.log('客户类型分页数据', res)
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    //屏蔽商品
    hideGoods() {
      this.tableData = [] //思路:将el-table绑定的数组赋值为空。
    },
    async checkChange() {
      console.log('浮动比例', this.editform.priceFloatRatio)
      getDictValue({ dict_code: 'float', current: 1, pagesize: 1 }).then(
        (Response) => {
          this.floatData = Response.data.list[0].value
          console.log(this.floatData, '1807')
          // 添加
          if (
            this.addform.priceFloatRatio >
            parseFloat(Response.data.list[0].value)
          ) {
            this.$alert(
              '最高浮动价格比例为' + parseFloat(Response.data.list[0].value),
              '提示',
              {
                confirmButtonText: '确定',
                type: 'info',
                showClose: false,
              }
            ).then(() => {
              this.addform.priceFloatRatio = parseFloat(
                Response.data.list[0].value
              )
            })
          }
          // 编辑
          if (
            this.editform.priceFloatRatio >
            parseFloat(Response.data.list[0].value)
          ) {
            this.$alert(
              '最高浮动价格比例为' + parseFloat(Response.data.list[0].value),
              '提示',
              {
                confirmButtonText: '确定',
                type: 'info',
                showClose: false,
              }
            ).then(() => {
              this.editform.priceFloatRatio = parseFloat(
                Response.data.list[0].value
              )
            })
          }
        }
      )
    },
  },
}
</script>

<style lang="scss" scoped>
* {
  margin: 0%;
  padding: 0%;
}

.div {
  .top-div {
    position: absolute;
    top: 0;
    width: 100%;
    height: 45.6px;
    background-color: white;
    display: flex;
    align-items: center;
    flex-wrap: nowrap; //不换行。
    justify-content: space-between;
  }

  .table-div {
    padding: 10px 20px;
    margin-top: 40px;
    background-color: white;
  }

  .el-breadcrumb {
    margin-left: 23px;
  }

  ::v-deep button.el-button.el-button--primary.el-button--small {
    margin-right: 50px;
    width: 75px;
    height: 30px;
  }

  ::v-deep .el-table .cell {
    text-align: center;
    height: 33px;
    line-height: 33px;
  }

  ::v-deep td.el-table_1_column_1.el-table__cell {
    border-right: none;
  }

  ::v-deep th.el-table_1_column_1.is-leaf.el-table__cell {
    border-right: none;
  }

  .el-butotn-div {
    display: inline-block;
    position: absolute;
    right: 0%;
    top: 0%;
  }

  button.el-button.el-button--default.el-button--small {
    border: 0;
    height: 50px;
    margin: 0;
    width: 70px;
    font-size: 14px;
    background-color: rgb(24, 144, 255);
    color: white;
    border-radius: 0;
  }

  //tabel表格内框为无。
  ::v-deep td.el-table_4_column_11.el-table__cell {
    border-right: none;
  }

  //tabel表头内框为无。
  ::v-deep th.el-table_4_column_11.is-leaf.el-table__cell {
    border-right: none;
  }
  //.operation{
  //  margin-right: 36px;
  //}
}
</style>
